<template>
  <el-row class="container">
    <el-col :span="24">
      <el-row>
        <el-col :span="5">
          <h2>展品设置</h2>
        </el-col>
        <el-col :span="19">
          <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="">
              <el-input v-model="form.mainTitle" placeholder="展品名称" clearable size="mini"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit" size="mini">搜索</el-button>
            </el-form-item>
            <el-form-item>
              <el-select v-model="form.state" placeholder="全部展品" size="mini" @change="changeState">
                <el-option label="全部展品" :value="null"></el-option>
                <el-option label="已入库" :value="0"></el-option>
                <el-option label="已展出" :value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <app-selector :url="exhibitCategoryUrl" :is-public-api="true" :defaultOption="'全部展品'"  @changeItem="changeTypeId" v-model="form.typeId"></app-selector>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-table
        border
        :data="listData.items">
        <el-table-column
          width="100"
          label="操作"
          align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="storageIn(scope.row.id)" v-if="scope.row.state === 1">入库
            </el-button>
            <el-button
              type="primary"
              size="mini"
              @click="storageOut(scope.row.id)" v-if="scope.row.state === 0">展出
            </el-button>
            <el-button
              size="mini"
              @click="onPreview(scope.row.id)">预览
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="id"
          label="ID"
          width="50"
          align="center">
          <template slot-scope="scope">
            <div style="color: #409EFF;text-decoration: underline;cursor: pointer" @click="onEdit(scope.row.id)">{{scope.row.id}}</div>
            <edit-exhibit-dialog :show.sync="editExhibitDialogShow" @success="initData" v-if="editId === scope.row.id" :isedit="true" :id="editId"></edit-exhibit-dialog>
          </template>
        </el-table-column>
        <el-table-column
          prop="mainTitle"
          label="展品名称"
          align="center">
        </el-table-column>
        <el-table-column
          prop="subheading"
          label="副标题"
          align="center">
        </el-table-column>
        <el-table-column
          prop="mainImgUrl "
          label="缩略图"
          align="center">
          <template slot-scope="scope">
            <img :src="scope.row.mainImgUrl | imgSrc" alt="" height="150px" width="100%">
          </template>
        </el-table-column>
        <el-table-column
          prop="size"
          label="尺寸"
          align="center">
        </el-table-column>
        <el-table-column
          width="300"
          prop="content"
          label="描述"
          align="center"
          class-name="describe_column">
        </el-table-column>
        <el-table-column
          width="100"
          prop="tag"
          label="标签"
          align="center">
        </el-table-column>
        <el-table-column
          width="80"
          prop="exhibitTypeName"
          label="分类"
          align="center">
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态"
          width="80"
          align="center">
          <template slot-scope="scope">
            <div>{{scope.row.state === 0 ? '已入库' : '已展出'}}</div>
          </template>
        </el-table-column>
        <el-table-column
          width="100"
          prop="createAt"
          label="创建日期"
          align="center">
          <template slot-scope="scope">
            <div>{{scope.row.createAt | format}}</div>
          </template>
        </el-table-column>
      </el-table>
      <app-pagination
        :currentPage.sync="listData.page"
        :size.sync="listData.size"
        :total="listData.total"
        @handleCurrentChange="initData()"
        @handleSizeChange="initData()"
      ></app-pagination>
      <div class="add_btn_box">
        <el-button @click="addExhibitDialogShow = true" type="primary" size="mini">新增</el-button>
      </div>
    </el-col>
    <add-exhibit-dialog :show.sync="addExhibitDialogShow" @success="initData" v-if="addExhibitDialogShow"></add-exhibit-dialog>
    <preview-dialog :previewDialogShow.sync="previewDialogShow" :id="previewId" v-if="previewDialogShow"></preview-dialog>
  </el-row>
</template>
<script>
  import ApiClient from '@/utils/ApiClient'
  import AppPagination from '@/components/AppPagination'
  import AppSelector from '@/components/AppSelector'
  import AddExhibitDialog from './AddExhibitDialog'
  import EditExhibitDialog from './EditExhibitDialog'
  import PreviewDialog from './PreviewDialog'

  export default {
    components: {
      'app-pagination': AppPagination,
      'app-selector':AppSelector,
      'add-exhibit-dialog':AddExhibitDialog,
      'edit-exhibit-dialog':EditExhibitDialog,
      'preview-dialog': PreviewDialog
    },
    data() {
      return {
        listData: {
          page: 1,
          size: 10,
          items: null,
          total: null,
          totalPage: null,
        },
        form: {
          mainTitle: '',
          state:null,
          typeId:null,
        },
        exhibitCategoryUrl:'/backend/common/typeList.do',
        addExhibitDialogShow:false,
        editExhibitDialogShow:false,
        previewDialogShow: false,
        editId:null,
        previewId: null,
      }
    },
    methods: {
      initData() {
        ApiClient.get('/backend/exhibit/list.do', {
          page: this.listData.page,
          size: this.listData.size,
          mainTitle: this.form.mainTitle,
          state:this.form.state,
          typeId:this.form.typeId,
        }).then(data => {
          this.listData = data
        })
      },
      onSubmit() {
        this.listData.page = 1;
        this.listData.size = 10;
        this.initData()
      },
      storageIn(id) {
        ApiClient.put(`/backend/exhibit/${id}/hide.do`).then(data => {
          this.initData()
        }).catch()
      },
      storageOut(id) {
        ApiClient.put(`/backend/exhibit/${id}/show.do`).then(data => {
          this.initData()
        }).catch()
      },
      //状态切换（入库和展出）
      changeState(){
        this.listData.page=1;
        this.listData.size=10;
        this.initData()
      },
      changeTypeId(){
        this.listData.page=1;
        this.listData.size=10;
        this.initData()
      },
      //编辑
      onEdit(id){
        this.editExhibitDialogShow=true;
        this.editId = id;
      },
      onPreview(id) {
        this.previewDialogShow=true;
        this.previewId = id;
      }
    },
    mounted() {
      this.initData()
    }
  }
</script>
<style scoped lang="scss">
  .container {
    .add_btn_box {
      margin-top: 20px;
      .el-button {
      }
    }

  }
</style>
<style>
  .describe_column .cell{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  td .el-button + .el-button{
    margin-top: 4px;
    margin-left: 0;
  }
</style>
